<template>
  <v-scale-screen :width="1920" :height="1080" >
<!--  <FitScreen :width="1920" :height="1080" mode="fit" style="background-color: black;" :executeMode="'debounce'">-->
    <div class="main">
        <!------------------------------------------ 顶部 ------------------------------------------>
        <div class="main_top df aic jcsb">
            <div class="main_top_left df ais">
                <img src="../../../assets/images/bigScreen/LIECHEBAO.png" alt="">
                <p>{{ address }}&emsp;{{ weather['weather'] }}&nbsp;{{ weather['temperature'] }}℃</p>
            </div>
            <div class="main_top_center">{{ companyName }}可视化大屏</div>
            <div class="main_top_right">{{ currentTimeElement }}</div>
        </div>
        <div class="main_content df">
            <div class="main_content_li">
                <div style="height: calc(100% - 14rem);" class="df fdc jcse">
                    <!------------------------------ 实时拆解情况 ------------------------------>
                    <div>
                        <div>
                            <div class="titelImg">实时拆解情况</div>
                            <div class="main_content_li_c"><span>实时动态</span>&emsp;|&emsp;川A12345预备入场检测</div>
                        </div>
                        <div class="main_content_li_l df aic jcsb">
                            <div class="main_content_li_l_left pr ml20 mr20">
                                <Echarts_largeScreen_1></Echarts_largeScreen_1>
                            </div>
                            <div class="main_content_li_l_right ml20">
                                <p style="color: rgba(255, 255, 255, 0.87);">拆解中数量</p>
                                <div class="df aic mb10">
                                    <el-slider v-model="Dismantle" />
                                    <div style="width: 20%;" class="ml20">{{ Dismantle }}个</div>
                                </div>
                                <p style="color: rgba(255, 255, 255, 0.87);">已完成数量</p>
                                <div class="df aic">
                                    <el-slider v-model="DismantleOri" />
                                    <div style="width: 20%;" class="ml20">{{ DismantleOri }}个</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!------------------------------ 实时拆解情况 ------------------------------>
                    <div>
                        <div class="titelImg">配件实时入库情况</div>
                        <div class="ml20 mb20" style="width: 100%;">
                            <el-table :data="tableData" stripe size="small" :header-cell-style="{backgroundColor:'transparent'}" :header-row-style="{backgroundColor:'transparent'}">
                                <el-table-column prop="fitting.fittingId" label="编号" show-overflow-tooltip width="55" />
                                <el-table-column prop="fitting.fittingName" label="名称" show-overflow-tooltip
                                    width="60" />
                                <el-table-column prop="fitting.brand" label="品牌" show-overflow-tooltip />
                                <el-table-column prop="fitting.series" label="车系" show-overflow-tooltip />
                                <el-table-column prop="areaInfo.warehouseName" label="入库仓库" show-overflow-tooltip />
                                <el-table-column prop="address" label="入库位置" show-overflow-tooltip />
                                <el-table-column label="操作状态" show-overflow-tooltip>
                                    <!-- 0是没有 1是上了 -->
                                    <template #default="props">
                                        <span v-if="props.row.fitting.status == 1">已上架</span>
                                        <span v-if="props.row.fitting.status == 0">未上架</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!------------------------------ 收拆量趋势 ------------------------------>
                    <div>
                        <div class="titelImg">收拆量趋势</div>
                        <div class="pr" style="padding-left: 2.5rem;">
                            <large_echarts_1></large_echarts_1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_content_li">
                <div style="height: calc(100% - 16rem);padding-top: 6rem" class="df fdc jcse">
                    <!------------------------------ 减碳量 ------------------------------>
                    <div class="main_content_center_top df aic jcse">
                        <div class="main_content_center_top_l">累计减碳量</div>
                        <div class="main_content_center_top_c df">
                            <div v-for="(item, index) in kgceValArr" :key="index"
                                class="main_content_center_top_c_list">
                                <p>{{ item }}</p>
                            </div>
                        </div>
<!--                        <div class="main_content_center_top_r">kgce</div>-->
                    </div>
                    <div class="df jcsb" style="margin:2.9rem;">
                        <div class="df aic jcc" style="width: 50%;">
                            <img style="width: 7rem;height: 7rem;margin-right: 0.625rem;"
                                src="../../../assets/images/bigScreen/icon_car.png" alt="">
                            <div>
                                <p style="font-family: 'MyFont';font-size: 1.5rem;">本月收车数</p>
<!--                                <p style="font-family: 'MyFont';font-size: 2.5rem;">{{ topFormData.本月收车 }}</p>-->
                            </div>
                        </div>
                        <div class="df aic jcc" style="width: 50%;">
                            <img style="width: 7rem;height: 7rem;margin-right: 0.625rem;"
                                src="../../../assets/images/bigScreen/icon_Dismantling.png" alt="">
                            <div>
                                <p style="font-family: 'MyFont';font-size: 1.5rem;">本月拆车数</p>
<!--                                <p style="font-family: 'MyFont';font-size: 2.5rem;">{{ topFormData.本月拆车 }}</p>-->
                            </div>
                        </div>
                    </div>
                    <!------------------------------ 拆解资源占比 ------------------------------>
                    <div>
                        <div class="titelImg">拆解资源占比</div>
                        <div style="height: 18.75rem;width: 100%;" class="pr">
                            <large_echarts_2></large_echarts_2>
                        </div>
                        <div class="df jcc">
                            <div class="proportion" v-for="(item, index) in proportion" :key="index">
                                <p style="color: rgba(116, 133, 165, 1);font-size: 0.875rem;margin-bottom: 0.6rem;">库存{{
                    item.name }}</p>
                                <div class="df aic">
                                    <div
                                        style="width: 0.125rem;height: 1.25rem;background-color: #2771ff;margin-right: 0.625rem;">
                                    </div>
                                    <p style="font-size: 1.25rem;color: #fff;">{{ item.value }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_content_li">
                <div style="height: calc(100% - 13rem);" class="df fdc jcse">
                    <!------------------------------ 原材料库存 ------------------------------>
                    <div>
                        <div class="titelImg">原材料库存</div>
                        <div class="df jcse" style="margin-top: 1.25rem;">
                            <div>
                                <img src="../../../assets/images/bigScreen/cube.png" alt="">
                                <p style="color: #5298E2; margin: 0.5rem 0 0.25rem;">钢铁</p>
                                <p style="font-size: 1.75rem;">{{ steel }}<span
                                        style="font-size: 0.75rem;color:#A4A7AC">
                                        kg</span>
                                </p>
                            </div>
                            <div>
                                <img src="../../../assets/images/bigScreen/cube.png" alt="">
                                <p style="color: #5298E2; margin: 0.5rem 0 0.25rem;">铜</p>
                                <p style="font-size: 1.75rem;">{{ copper }}<span
                                        style="font-size: 0.75rem;color:#A4A7AC">
                                        kg</span>
                                </p>
                            </div>
                            <div>
                                <img src="../../../assets/images/bigScreen/cube.png" alt="">
                                <p style="color: #5298E2; margin: 0.5rem 0 0.25rem;">铝材</p>
                                <p style="font-size: 1.75rem;">{{ aluminum }}<span
                                        style="font-size: 0.75rem;color:#A4A7AC">
                                        kg</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!------------------------------ 配件库存 ------------------------------>
                    <div>
                        <div class="titelImg">配件库存</div>
                        <div class="df jcse">
                            <div class="parts">
                                <p style="font-size: 2.25rem;font-family: 'MyFont';">{{ fittings }}</p>
                                <p style="line-height: 2.5rem;">溯源件/个</p>
                            </div>
                            <div class="parts">
                                <p style="font-size: 2.25rem;font-family: 'MyFont';">{{ parts }}</p>
                                <p style="line-height: 2.5rem;">非溯源件/个</p>
                            </div>
                        </div>
                    </div>
                    <!------------------------------ 各流程车辆统计 ------------------------------>
                    <div>
                        <div class="titelImg">各流程车辆统计</div>
                        <div class="pr">
                            <large_echarts_3></large_echarts_3>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="main_bottom">
            <div class="df jcc">
                <div class="main_bottom_btn" @click="backHome">返回主页</div>
                <div class="main_bottom_btn">数据展示</div>
                 <div class="main_bottom_btn" @click="openDialog">宣传片</div>
                <!-- <div class="main_bottom_btn">监控</div> -->
            </div>
        </div>
    </div>
<!--    </FitScreen>-->
  </v-scale-screen>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VScaleScreen from 'v-scale-screen';
import { formatTimeAll } from '@/filters/index'
import {
    RequestStatisticGetCarNumOfDS, RequestCompaniesList, RequestStatisticGetTopMessage,
    RequestFittingsGetLatestFittings, RequestStatisticGetPieChartData, RequestStatisticGetMaterialScale,
    RequestStatisticGetCarByProcess
} from "@/api/path/index.js"
import { weatherApi } from '@/api/mapApi.js'
import { useRouter } from 'vue-router';
import large_echarts_1 from '@/components/large/large_echarts_1.vue'
import large_echarts_2 from '@/components/large/large_echarts_2.vue'
import Echarts_largeScreen_1 from '@/components/large/Echarts_largeScreen_1.vue'
import loading from '@/TUIKit/components/common/Loading/index';
const companyName = JSON.parse(localStorage.getItem('roleInfo')!).companyName
const company = JSON.parse(localStorage.getItem('roleInfo')!).company
const router = useRouter()

/* 返回首页 */
const backHome = () => {
    router.push('/Home')
}
const address = ref<any>('')
const tableData = ref<any>([])
const kgceVal = ref<any>(132131)
const kgceValArr = ref<any>([])
const weather = ref<any>({
    weather: '',
  temperature:''
})
const currentTimeElement = ref<any>()
const Dismantle = ref<any>()
const DismantleOri = ref<any>()
const topFormData = ref<any>()
const proportion = ref<any>()
const aluminum = ref<number>(0)               //铝材
const copper = ref<number>(0)                 //铜
const steel = ref<number>(0)                  //钢铁
const parts = ref<any>('')                  //非溯源件
const fittings = ref<any>('')               //溯源件
const getData = () => {

    /* 获取公司名称 */
    RequestCompaniesList(company).then((res: any) => {
        address.value = res.resultObj[0].address.split(',')[0]
        res.resultObj[0].address = res.resultObj[0].address.split(',')[0]
        weatherApi(res.resultObj[0].address).then((val: any) => {
            weather.value = val.data.lives[0]
        })
    })
    /* 实时拆解情况 */
    RequestStatisticGetCarNumOfDS().then((res: any) => {
        Dismantle.value = res.resultObj.拆解中
        DismantleOri.value = res.resultObj.已拆解
    })
    /* 本月收拆车数 */
    RequestStatisticGetTopMessage().then((res: any) => {
        topFormData.value = res.resultObj
    })
    /* 配件实时入库情况 */
    RequestFittingsGetLatestFittings().then((res: any) => {
        res.resultObj.forEach((item: any) => {
            item.address = item.areaInfo.area + ' ，' + item.areaInfo.position
        });
        tableData.value = res.resultObj
    })
    RequestStatisticGetPieChartData().then((res: any) => {
        res.resultObj = res.resultObj.filter((item: any) => item.name !== '危固废');
        proportion.value = res.resultObj
        res.resultObj.forEach((item: any) => {
            if (item.name == '非溯源件') {
                parts.value = item.value
            } else if (item.name == '溯源件') {
                fittings.value = item.value
            }
        });

    })
    /* 原材料库存 */
    RequestStatisticGetMaterialScale().then((res: any) => {
        res.resultObj.forEach((item: any) => {
            if (item.name.includes('铜')) {
                copper.value += Number(item.value)
            } else if (item.name.includes('钢') || item.name.includes('铁')) {
                steel.value += Number(item.value)
                kgceValArr.value = JSON.stringify(steel.value * 2).split('')
            } else if (item.name.includes('铝')) {
                aluminum.value += Number(item.value)
            }
        });
    })
}

const openDialog=()=>{
    location.href='http://47.109.89.106/videos/xcp.mp4'
}
/* 时间 */
setInterval(() => {
    const currentTime = new Date();
    currentTimeElement.value = formatTimeAll(currentTime);
}, 1000)
getData()
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'myFont';
    src: url('../../../assets/images/bigScreen/YouSheBiaoTiHei.ttf');
}
.proportion {
    width: 26%;
    padding: 0.625rem 1rem;
    background: rgba(18, 42, 74, 0.8);
    box-shadow: inset 0 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.4966);
    opacity: 0.7;
    border: 0.0625rem solid;
    border-image: linear-gradient(163deg, rgba(78.00000295042992, 109.00000110268593, 157.0000058412552, 0.39155375957489014), rgba(35.498724952340126, 86.45856946706772, 163.72027963399887, 0.4290319085121155)) 1 1;
    border-radius: 0.5rem;
    margin: 0 0.3125rem;
}



.titelImg {
    width: 100%;
    height: 2.875rem;
    background: url('../../../assets/images/bigScreen/datapic_title.png') no-repeat center center;
    font-family: 'MyFont';
    padding-left: 6.25rem;
    font-size: 1.25rem;
    line-height: 2.2rem;
    color: #CFEAFF;
    margin-bottom: 1.125rem;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
  color: #5298E2  !important;

}
::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}

::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
  color: #fff !important;
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent;
}

/* 去除底部白线 */
::v-deep .el-table::before {
  background-color: transparent;
}

::v-deep .el-table__inner-wrapper::before {
  height: 0 !important;
}

::v-deep .el-table__row--striped {
  background: linear-gradient(270deg, rgba(16, 40, 73, 0.0001) 0%, #072A5F 51%, rgba(16, 40, 73, 0.0001) 100%);
}
.main {
    width: 1920px;
    height: 1080px;
    overflow: auto;
    background: url('../../../assets/images/bigScreen/data_bg.png') no-repeat center center;
    background-size: cover;
    color: #fff;

    .main_top {
        width: 1920px;
        height: 5rem;
        background: url('../../../assets/images/bigScreen/datapic_top.png') no-repeat center top;
        background-size: cover;

        .main_top_left {
            text-align: center;
            line-height: 4.875rem;
            height: 5rem;
            width: 20.625rem;

            img {
                width: 9rem;
                padding: 1.25rem 0 0 1.25rem;
                margin-right: 1.25rem;
            }

            p {
                font-size: 1.125rem;
            }
        }

        .main_top_center {
            text-align: center;
            font-size: 1.625rem;
            height: 5rem;
            line-height: 5rem;
            // font-family: 'myFont';
        }

        .main_top_right {
            font-size: 1rem;
            width: 20.625rem;
            height: 5rem;
            text-align: center;
            line-height: 7.5rem;
        }
    }

    .main_content {
        width: 100%;
        height: calc(100% - 5rem - 4.375rem);
        padding-top: 2.6rem;

        .main_content_li {
            width: 33.33%;
            height: 100%;

            .main_content_li_l {
                margin-top: 1.25rem;
                width: 100%;
                height: 8.75rem;

                .main_content_li_l_left {
                    width: 8.75rem;
                    height: 8.75rem;
                    // background-color: red;
                }

                .main_content_li_l_right {
                    width: calc(100% - 10rem);
                    height: 8.75rem;

                }
            }

            .main_content_li_c {
                width: 28.75rem;
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 0.875rem;
                padding-left: 5rem;
                background: linear-gradient(270deg, rgba(0, 42, 77, 0.0001) 0%, #002646 55%, rgba(0, 42, 77, 0.0001) 100%);
                font-weight: 200;

                span {
                    font-family: 'MyFont';
                    font-size: 1.125rem;
                }
            }

            .main_content_center_top {
                .main_content_center_top_l {
                    font-size: 1.875rem;
                    font-family: 'MyFont';
                    text-shadow: 0rem 0.25rem 0.9375rem #007EB8;
                    background: linear-gradient(180deg, #FFFFFF 0%, #CFEAFF 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .main_content_center_top_c {
                    .main_content_center_top_c_list {
                        width: 3.75rem;
                        height: 3.75rem;
                        background: url('../../../assets/images/bigScreen/Cardframe.png') no-repeat center center;

                        p {
                            font-size: 2.5rem;
                            font-family: 'MyFont';
                            text-align: center;
                            line-height: 3.75rem;
                            background: linear-gradient(180deg, #FFFFFF 0%, #006FD0 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }
                }

                .main_content_center_top_r {
                    font-weight: 200;
                }
            }
        }
    }

    .main_bottom {
        width: 100%;
        height: 4.375rem;
        background: url('../../../assets/images/bigScreen/datapic_bottom.png') no-repeat center center;
        background-size: cover;

        .main_bottom_btn {
            user-select: none;
            cursor: pointer;
            width: 9.375rem;
            height: 4.25rem;
            font-family: 'myFont';
            text-align: center;
            line-height: 4.25rem;
            font-size: 1.25rem;
            background: url('../../../assets/images/bigScreen/btn_normal.png') no-repeat center;
            background-size: 90%;

            &:nth-child(2) {
                background: url('../../../assets/images/bigScreen/btn_display.png') no-repeat center;
                background-size: 90%;
            }

            &:hover {
                background: url('../../../assets/images/bigScreen/btn_display.png') no-repeat center;
                background-size: 90%;
                transition: 300ms;
            }
        }
    }
}

.parts {
    width: 30%;
    height: 11.25rem;
    background: url('../../../assets/images/bigScreen/circular_data.png') no-repeat center bottom;
    text-align: center;
}

:deep(.el-slider__runway) {
    background-color: rgba(112, 112, 112, 0.23);
}

:deep(.el-slider__bar) {
    background: linear-gradient(259deg, #1B7EF2 0%, rgba(27, 126, 242, 0) 100%) !important;
    border-top-left-radius: var(--el-slider-border-radius);
    border-bottom-left-radius: var(--el-slider-border-radius);
    position: absolute;
}

:deep(.el-slider__button) {
    border: solid 0.0625rem #1b7bed;
    background: radial-gradient(circle at center, #ffffff, #172330, #172330) !important;
}
</style>
